<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>输入卡号</title>
    <link rel="stylesheet" href="__PUBLIC__/Product/css/lib/animate.css">
    <script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .input_box .input_heard {
            width: 100%;
            height: 1.186667rem;
            background: linear-gradient(to right, #6951bc, #a163e0);
            position: relative;
        }
        .input_box .input_heard .goback {
            width: 0.226667rem;
            height: 0.453333rem;
            position: absolute;
            bottom: 0.36rem;
            left: 0.266667rem;
        }
        .input_box .input_heard p {
            font-size: 0.48rem;
            line-height: 1.186667rem;
            text-align: center;
            color: white;
        }
        .input_con .cardInfo {
            width: 9.466667rem;
            height: 1.226667rem;
            padding: 0 .266667rem;
            line-height: 1.226667rem;
            font-size: .32rem;
            display: flex;
            background-color: white;
            margin-top: .266667rem;
        }
        .input_con .cardInfo .left {
            width: 1.893333rem;
            color: #898989;
        }
        .input_con .cardInfo .right {
            font-size: .4rem;
        }
        .input_con .tixing {
            display: flex;
            padding: .266667rem .36rem;
        }
        .input_con .tixing img {
            width: .266667rem;
            height: .32rem;
            margin-top: .066667rem;
            margin-right: .266667rem;
        }
        .input_con .tixing p {
            vertical-align: top;
        }
        .input_con .input_list_ul {
            width: 9.466667rem;
            height: 2.48rem;
            padding: 0 .266667rem;
            border-top: .013333rem solid #e9e9e9;
            border-bottom: .013333rem solid #e9e9e9;
            background-color: white;
        }
        .input_con .ul1 {
            margin-bottom: .4rem;
        }
        .input_con .ul2 {
            margin-bottom: 1.52rem;
        }
        .input_con .input_list_ul li {
            width: 100%;
            height: 1.226667rem;
            display: flex;
        }
        .input_con .input_list_ul li:nth-child(1) {
            border-bottom: .013333rem solid #e9e9e9;
        }
        .input_con .input_list_ul li div {
            width: 1.6rem;
            height: 100%;
            line-height: 1.226667rem;
            font-size: .373333rem;
        }
        .input_con .input_list_ul li input {
            width: 7.666667rem;
            border: 0;
            outline: none;
            padding-left: .4rem;
            -webkit-appearance: none;
        }
        .input_con .input_list_ul li .checkedNum{
            width: 5rem;
        }
        .input_con .input_list_ul li .getCheckedNum{
            width: 2.666667rem;
            height: 1.226667rem;
            text-align: center;
            color: #3ba65c;
            border: 0;
            outline: none;
            background-color: white;
            font-size: .346667rem;
        }
        .input_con button{
            width: 9.466667rem;
            height: 1.173333rem;
            font-size: .4rem;
            color: white;
            border: 0;
            background-color: #d1d1d1;
            margin-left: .266667rem;
            border-radius: .106667rem;
            outline: none;
        }
        .input_con .active{
            background: linear-gradient(to right, #6951bc, #a163e0);
        }
        .alert{
            display: none;
            width: 5.333333rem;
            height: .8rem;
            font-size: .346667rem;
            line-height: .8rem;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, .4);
            position: fixed;
            top: 6.76rem;
            left: 2.333333rem;
            z-index: 99;
            border-radius: .106667rem;
        }
        .show{
            animation: bounceInUp 1.5s; 
        }
    </style>
</head>
<body style="background-color:#f4f4f4;">
    <div class="input_box">
        <!-- 头部 -->
        <div class="input_heard">
            <img class="goback" src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
            <p>输入卡号</p>
        </div>
        <!-- 内容 -->
        <div class="input_con">
            <div class="cardInfo">
                <div class="left">银行卡</div>
                <div class="right">农业银行储蓄卡（8888）</div>
            </div>
            <div class="tixing">
                <img src="__PUBLIC__/Product/img/green_dun.png" alt="">
                <p>信息强加密处理，保障个人隐私不泄露</p>
            </div>
            <ul class="input_list_ul ul1">
                <li>
                    <div>姓名</div>
                    <input type="text" placeholder="请输入姓名" class="name">
                </li>
                <li>
                    <div>身份证</div>
                    <input type="text" placeholder="请输入15位或18位身份证号码" class="IdcardNum" maxlength="18">
                </li>
            </ul>
            <ul class="input_list_ul ul2">
                <li>
                    <div>手机号</div>
                    <input type="number" placeholder="银行预留手机号" class="telphonrNum" maxlength="11">
                </li>
                <li>
                    <div>验证码</div>
                    <input type="number" placeholder="请输入验证码" class="checkedNum">
                    <button class="getCheckedNum">获取验证码</button>
                </li>
            </ul>
            <button class="next">下一步</button>
        </div>
        <!-- 弹框 -->
        <div class="alert"></div>
    </div>
</body>
</html>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script>
    $(function () {
        var flag1 = false;
        var flag2 = false;
        $('.goback').bind('click', function () {
            window.location.href = document.referrer; //返回上一页并刷新
        });
        // 验证身份证号码
        $('input.IdcardNum').blur(function () {
            var IdcardNum = $(this).val();
            if (IdcardNum.length == 15 || IdcardNum.length == 18) {
                if (isIdCardNo(IdcardNum)) {
                    flag1 = true;
                } else {
                    flag1 = false;
                    $('.alert').show().addClass('show').text('请输入正确的身份证号');
                    setTimeout(function(){
                        $('.alert').fadeOut('slow').removeClass('show').text('');
                    },3000);
                }
            } else {
                $('.alert').show().addClass('show').text('请输入正确的身份证号');
                setTimeout(function(){
                    $('.alert').fadeOut('slow').removeClass('show').text('');
                },3000);
            }
        });
        // 验证手机号码
        $('.telphonrNum').blur(function () {
            var telphonrNum = $('.telphonrNum').val();
            if (telphonrNum.length == 11) {
                if (isPhone(telphonrNum)) {
                    flag2 = true;
                } else {
                    flag2 = false;
                    $('.alert').show().addClass('show').text('请输入正确的手机号');
                    setTimeout(function(){
                        $('.alert').fadeOut('slow').removeClass('show').text('');
                    },3000);
                }
            } else {
                $('.alert').show().addClass('show').text('请输入正确的手机号');
                setTimeout(function(){
                    $('.alert').fadeOut('slow').removeClass('show').text('');
                },3000);
            }
        });
        // 点击按钮获取验证码
        $('.getCheckedNum').click(function(){ 
            $('.alert').show().addClass('show').text('验证码已发送，请注意查收');
            setTimeout(function(){
                $('.alert').fadeOut('slow').removeClass('show').text('');
            },3000);
            var btn = $(this);  
            var count = 60;  
            var resend = setInterval(function(){  
                count--;  
                if (count > 0){
                    btn.text(count + " 秒"); 
                }else {  
                    clearInterval(resend);  
                    btn.text("重新获取").removeAttr('disabled style');  
                }  
            }, 1000);  
            btn.attr('disabled',true).css('cursor','not-allowed');  
        }); 
        // 输入验证码
        $('input.checkedNum').bind("input propertychange", function () {
            var checkedNum = $(this).val();
            var name = $('.name').val();
            var telphonrNum = $('.telphonrNum').val();
            var IdcardNum = $('.IdcardNum').val();
            if (checkedNum.length == 6) {
                if (name.length != 0 && flag1 && flag2) {
                    $('.next').addClass('active').attr('disabled',false).bind('click',function(){
                        console.log(1111);
                    });
                } else {
                    $('.alert').show().addClass('show').text('信息有误');
                    setTimeout(function(){
                        $('.alert').fadeOut('slow').removeClass('show').text('');
                    },3000);
                }
            } else {
                $('.next').removeClass('active').attr('disabled',true);
            }
        });

        //手机号码验证
        function isPhone(phone) {
            var rules = /^1[3|4|5|7|8][0-9]{9}$/;
            return rules.test(phone);
        }

        /* 审批系统的身份证验证
         * 身份证15位编码规则：dddddd yymmdd xx p
         * dddddd：6位地区编码
         * yymmdd: 出生年(两位年)月日，如：910215
         * xx: 顺序编码，系统产生，无法确定
         * p: 性别，奇数为男，偶数为女
         * 
         * 身份证18位编码规则：dddddd yyyymmdd xxx y
         * dddddd：6位地区编码
         * yyyymmdd: 出生年(四位年)月日，如：19910215
         * xxx：顺序编码，系统产生，无法确定，奇数为男，偶数为女
         * y: 校验码，该位数值可通过前17位计算获得
         * 
         * 前17位号码加权因子为 Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ]
         * 验证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
         * 如果验证码恰好是10，为了保证身份证是十八位，那么第十八位将用X来代替
         * 校验位计算公式：Y_P = mod( ∑(Ai×Wi),11 )
         * i为身份证号码1...17位; Y_P为校验码Y所在校验码数组位置
        */
        function isIdCardNo(idCard) {
            //15位和18位身份证号码的正则表达式
            var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
            //如果通过该验证，说明身份证格式正确，但准确性还需计算
            if (regIdCard.test(idCard)) {
                if (idCard.length == 18) {
                    var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                    var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                    var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                    for (var i = 0; i < 17; i++) {
                        idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                    }
                    var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
                    var idCardLast = idCard.substring(17); //得到最后一位身份证号码
                    //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                    if (idCardMod == 2) {
                        if (idCardLast == "X" || idCardLast == "x") {
                            //alert("恭喜通过验证啦！");
                            return true;
                        } else {
                            // alert("身份证号码错误！");
                            return false;
                        }
                    } else {
                        //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                        if (idCardLast == idCardY[idCardMod]) {
                            //alert("恭喜通过验证啦！");
                            return true;
                        } else {
                            //alert("身份证号码错误！");
                            return false;
                        }
                    }
                }
            } else {
                //alert("身份证格式不正确!");
                return false;
            }
        }
    });
</script>